<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <title>Document</title>
    <style>
        body{
            border:.1px solid transparent;
            padding:0;
            margin:0;

        }
            .bg{
                width: 100%;
                height:3rem;
                background-color:#1393ff;
                border-radius: 0rem 0rem 0.5rem 0.5rem;
                position:absolute;
                z-index: -1;
            }
            .content{
                width: 94%;
                margin:0 auto;
                /* border-radius: 0.4rem 0.4rem 0.4rem 0.45rem; */
                border-radius: 0.4rem 0.4rem 0.5rem 0.5rem;
                box-shadow:0 0 0.36rem 0 rgba(16,89,151,0.35);
                overflow: hidden;
                box-sizing:border-box;
                padding:0.4rem 0.15rem;
                margin-top:2.16rem;
                background-color:#fff;
            }
            .newForm{
                width: 4.4rem;
                height:0.8rem;
                border-radius: 0.8rem;
                margin:0.5rem auto 0;
                line-height: 0.8rem;
                text-align:center;
                background-image:linear-gradient(220deg, #59ceff 0%, #1393ff 99%);
                font-weight: 100;
                box-shadow:0rem 0.08rem 0.12rem 0.02rem rgba(74,172,255,0.36);
                color:#fff;
            }
            .tit{
                margin-bottom:0.2rem;
            }
            .upload-btn{
                border:0.05rem solid #ccc;
                border-radius:0.1rem;
                text-align:center;
                margin:0 auto;
                position:relative;
                color:rgb(223, 223, 223);
                padding:1rem;
            }
            .upload-btn input{
                width: 100%;
                position:absolute;
                left:0;
                top:0;
                opacity:0;
                bottom:0;
                right:0;
                font-size: 0.3rem;

            }
            .upload-btn>p{
                margin:0;
                font-size: 1rem;

            }
            .tit-img{
                font-size:1.6rem;
            }
            .tit-img>span{
                color:#a69163;
                font-size:1.6rem;
            }
            .tit-img>span::before{
                content: '';
                display: inline-block;
                width: .5rem;
                height: 2rem;
                background: #a69163;
                margin-right:0.6rem;
                vertical-align: top;
            }
            .word10,.word11,.word12,.word13{
                display: none;
                margin: 0 auto;
            }
            #loading{
                display: none;
                position: fixed;
                left:0;
                right:0;
                top:0;
                bottom:0;
                background:rgba(255, 255, 255, 0.8);
                z-index: 10;
            }
            #loading img{
                display: block;
                position: absolute;
                left:0;
                right:0;
                bottom:0;
                top:0;
                margin:auto;
            }
    </style>
</head>
<body>
    <div id="loading">
            <img src="http://img.inforward.com.cn/applet/loading.gif" alt="">
    </div>

        <!-- <div class="bg"></div>
        <img src="http://img.inforward.com.cn/applet/ownerbg.jpg" alt="" style="width:100%;position:absolute;z-index:-1;" mode="widthFix" > -->
        <div class="content">
                <div class="tit">
                    <div class="tit-img">
                        <!-- <img src="http://img.inforward.com.cn/applet/shu@1x.png"> -->
                        <span>上传证件照</span>
                    </div>
                    <div class="upload-btn">
                        <input type="file" onchange="uploadFile(event,1)">
                        <img class="newfile10" src="http://img.inforward.com.cn/applet/newfile.png" />
                        <img class="word10" src="http://img.inforward.com.cn/applet/word.png" />
                        <p class="text10">添加图片</p>
                    </div>
                </div>
                <div class="tit">
                    <div class="tit-img">
                        <!-- <img src="http://img.inforward.com.cn/applet/shu@1x.png"> -->
                        <span>上传全身照</span>
                    </div>
                    <div class="upload-btn">
                        <input type="file" onchange="uploadFile(event,2)">
                        <img class="newfile11" src="http://img.inforward.com.cn/applet/newfile.png" />
                        <img class="word11" src="http://img.inforward.com.cn/applet/word.png" />
                        <p class="text11">添加图片</p>
                    </div>
                    <div class="upload-btn">
                        <input type="file" onchange="uploadFile(event,3)">
                        <img class="newfile11" src="http://img.inforward.com.cn/applet/newfile.png" />
                        <img class="word11" src="http://img.inforward.com.cn/applet/word.png" />
                        <p class="text11">添加图片</p>
                    </div>
                </div>
                <div class="tit">
                    <div class="tit-img">
                        <!-- <img src="http://img.inforward.com.cn/applet/shu@1x.png"> -->
                        <span>上传简历</span>
                    </div>
                    <div class="upload-btn">
                        <input type="file" onchange="uploadFile(event,4)">
                        <img class="newfile12" src="http://img.inforward.com.cn/applet/newfile.png" />
                        <img class="word12" src="http://img.inforward.com.cn/applet/word.png" />
                        <p class="text12">添加文件</p>
                    </div>
                </div>
                <!-- <div class="tit">
                    <div class="tit-img">
                        <img src="http://img.inforward.com.cn/applet/shu@1x.png">
                        <span>资产收益价值评估报告</span>
                    </div>
                    <div class="upload-btn">
                        <input type="file" onchange="uploadFile(event,13)">
                        <img class="newfile13" src="http://img.inforward.com.cn/applet/newfile.png" />
                        <img class="word13" src="http://img.inforward.com.cn/applet/word.png" />
                        <p class="text13">添加文件</p>
                    </div>
                </div> -->
            </div>
    <script>
            (function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth>=750){
                            docEl.style.fontSize = '100px';/*移动端字体最好剩以16以rem做单位*/
                        }else{

                            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                            if(parseInt(docEl.style.fontSize) < 12 ){
                                docEl.style.fontSize = '12px';/*最小12pxrem就不能转换了*/
                            }
                        }
                    };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
                recalc();
            })(document, window);
            function uploadFile(e,item){//e为文件，item为文件类型

                let file = e.target.files[0],
                    param = document.location.toString().split('=')[1],//要发送文件的id
                $('#loading').css('display','block')
                if (file) {
                    //console.log(file)
                    //$('.text'+item).text(file.name)
                  var data = new FormData(); //重点在这里 如果使用 var data = {}; data.inputfile=... 这样的方式不能正常上传
                  data.append("token",{{$token}});
                  data.append("img_url", file);
                    data.append("resume_id",{{$resume_id}});
                    data.append("img_type",item);

                    $.ajax({
                        url: 'http://trm.inforward.com.cn/api/picture/store_appendix',
                        type:'POST',
                        cache: false,
                        processData: false,
                        contentType: false,
                        data: data,
                        success: function(data){
                            if(data.code == 0){
                                $('.newfile'+item).css('display','none')
                                $('.word'+item).css('display','block')
                                $('#loading').css('display','none')
                                $('.text'+item).text(file.name)
                            }
                        },
                        error: function(err) {
                            console.log(err)
                        }
                    })


                }
              }


    </script>
</body>
</html>
